<template>
  <div class="revise-back">
    <img class="revise-back-img" src="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/user-backdrop.jpg" alt="" />
    <div class="revise-avater global-display global-f-direction global-a-items">
      <van-uploader accept=".jpg,.jpeg,.png,.webp" max-count="1" result-type="file" :after-read="uploadAvatar">
        <img src="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/avatarurl.png" class="personal-margin" alt="" />
      </van-uploader>
      <van-uploader accept=".jpg,.jpeg,.png,.webp" max-count="1" result-type="file" :after-read="uploadBackdrop">
        <van-button type="default" size="small">设置背景</van-button>
      </van-uploader>
    </div>
  </div>
  <div class="personal-view global-display global-f-direction global-a-items">
    <van-field v-model="userData.nickname" label="昵称" placeholder="请填写昵称" />
    <van-field v-model="userData.gender" is-link readonly label="性别" placeholder="选择性别" @click="showPicker = true" />
    <van-field v-model="userData.birthday" is-link readonly label="出生日期" placeholder="选择出生日期" @click="showDate = true" />
    <van-field v-model="userData.city" is-link readonly label="常居城市" placeholder="选择常居城市" @click="showCity = true" />
    <van-button type="success" @click="subMit">提交</van-button>
  </div>
  <!-- 选择性别弹窗 -->
  <van-popup :show="showPicker" round position="bottom">
    <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
  </van-popup>
  <!-- 选择日期弹窗 -->
  <van-popup :show="showDate" round position="bottom">
    <van-date-picker v-model="birthdayDate" :min-date="minDate" :max-date="maxDate" @cancel="showDate = false" @confirm="confirmData" />
  </van-popup>
  <!-- 选择省市区 -->
  <van-popup :show="showCity" round position="bottom">
    <van-area :area-list="areaList" columns-num="2" @confirm="confirmCity" @cancel="showCity = false" />
  </van-popup>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { areaList } from "@vant/area-data"; //省市区数据
import { useRouter } from "vue-router";
import { showToast, showLoadingToast } from "vant";
import moment from "moment";
const $router = useRouter(); 

onMounted(() => {});

const userData = reactive({
  backdrop: "",
  avatarUrl: "https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/avatarurl.png",
  nickname: "张三丰",
  gender: "男",
  birthday: "2010-10-10",
  city: "四川省成都市",
});

// 性别弹窗显示||隐藏
const showPicker = ref(false);
const columns = [
  { text: "男", value: "1" },
  { text: "女", value: "0" },
];
// 日期生日弹窗显示||隐藏
const showDate = ref(false);

</script>

<style scoped>
.revise-back {
  height: 250px;
  overflow: hidden;
  position: relative;
}
.revise-back-img {
  height: 250px;
  width: 100%;
  object-fit: cover;
}
.revise-avater {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.personal-view {
  margin-top: 20px;
}
.personal-margin {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  object-fit: cover;
}
::v-deep .van-button--normal {
  margin: 40px 0;
  padding: 20px 100px;
}
</style>
